<template>
	<div>
		<div class="left">
			<el-card class="box-card">
				<div slot="header" class="clearfix"><span>团队列表</span></div>
				<div>
					<el-scrollbar>
						<ul class="ul" style="height: 500px;margin-top: 6px;">
							<li class="line" v-for="item in names">
								<span style="font-size: 12px;cursor: pointer;" @click="getChoose(item)">{{ item }}</span>
							</li>
						</ul>
					</el-scrollbar>
				</div>
			</el-card>
		</div>
		<div class="right">
			<el-card>
				<el-table :data="result.tableData" style="width: 100%" size="mini">
					<el-table-column label="ID" width="80" prop="id"></el-table-column>
					<el-table-column label="用户名" prop="username"></el-table-column>
					<el-table-column label="真实姓名" prop="relaname"></el-table-column>
					<el-table-column label="邮箱" prop="email" width="160"></el-table-column>
					<el-table-column label="电话号" prop="telephone"></el-table-column>
					<el-table-column label="岗位" prop="post"></el-table-column>
					<el-table-column label="所属部门" prop="department"></el-table-column>
					<el-table-column label="团队" prop="teamName"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-tooltip content="移除团队" effect="light" :visible-arrow="false"	 placement="bottom"><i style="font-size:20px" class="el-icon-link move" @click="move(scope.row)"></i></el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					style="margin-top:20px;"
					background
					layout="prev, pager, next"
					:page-count="result.pages"
					:current-page.sync="query.pageNo"
					:page-size="query.pageSize"
					@current-change="getChoose()"
				></el-pagination>
			</el-card>
		</div>
	</div>
</template>

<script>
import axios from '../../utils/axiosutils.js';

export default {
	name: 'TeamUser',
	data() {
		return {
			names: [],
			query: {
				teamName: '',
				pageNo: 1,
				pageSize: 8
			},
			result: {
				tableData: [],
				pages: 0
			}
		};
	},
	created() {
		this.getData();
		if(this.$router.currentRoute.params){
			this.getChoose(this.$router.currentRoute.params.name);
		}
	},
	
	methods: {
		getData() {
			axios.get('/team/names', resp => {
				this.names = resp.obj.names;
			});
		},
		getChoose(item) {
			this.query.teamName = item;
			axios.get(
				'/team/userlist',
				resp => {
					this.result.tableData = resp.obj.records;
					this.result.pages = resp.obj.pages;
				},
				this.query
			);
		},
		move(row){
			console.log(this.query.teamName)
			console.log(row.id)
			axios.get(
				"/team/move",
				resp=>{
					console.log(resp)
				},{
					id:row.id,
					name:this.query.teamName
				}
			);
		}
	}
};
</script>

<style scoped>
.left {
	display: inline-block;
	width: 150px;
}
.right {
	display: inline-block;
	vertical-align: top;
	margin-left: 50px;
	width: 1000px;
}
.move:hover{
	color: #55aaff;
}
.ul :hover{
	color: #0055ff;
}
</style>
